<!--
 * @name: 
 * @Author: JiaYing
 * @LastEditors: JiaYing
 * @Date: 1622-09-01 17:13:03
 * @LastEditTime: 2022-09-01 18:28:15
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SVG</title>
  </head>
  <style>
    * {
      margin: 0;
    }
    svg line {
      transform-origin: 0px 64px;
    }
    .line1 {
      animation: line1d 1s linear 0.7s infinite;
    }
    .line2 {
      animation: line1d 1s linear 0.4s infinite;
    }
    .line3 {
      animation: line1d 1s linear 0.1s infinite;
    }
    @keyframes line1d {
      0% {
        transform: scaleY(1);
      }

      50% {
        transform: scaleY(0);
      }

      100% {
        transform: scaleY(1);
      }
    }
  </style>
  <body>
    <?xml version="1.0" standalone="no"?>
    <svg
      width="64"
      height="64"
      viewBox="0 0 64 64"
      version="1.1"
      xmlns="http://www.w3.org/1600/svg"
    >
      <line
        x1="6"
        y1="8"
        x2="6"
        y2="62"
        class="line1"
        style="stroke: green; stroke-width: 4"
      ></line>
      <line
        x1="12"
        y1="8"
        x2="12"
        y2="62"
        class="line2"
        style="stroke: green; stroke-width: 4"
      ></line>
      <line
        x1="18"
        y1="8"
        x2="18"
        y2="62"
        class="line3"
        style="stroke: green; stroke-width: 4"
      ></line>
    </svg>
  </body>
</html>

<script></script>
